
<template>
  <div class="hello">
    <h1>管理员</h1>
    <el-row class="table-grid-content">
      <el-col :span="4" class="grid">
        <el-input v-model="input" placeholder="请输入查询内容"></el-input>
      </el-col>
      <el-col :span="2" class="grid" :gutter="1">
        <el-button type="success" icon="el-icon-search">查询</el-button>
      </el-col>
      <el-col :span="1" class="grid" :gutter="15"  >
        <el-button type="primary" @click="addMembers()">增加</el-button>
      </el-col>
      <el-menu :router="true"> <el-menu-item index="/login"><el-button  >退出登录</el-button></el-menu-item></el-menu>
    </el-row>

    <el-table :data="tables" :stripe="true" :border="true" width="100%">
      <el-table-column label="物业账号" prop="account"></el-table-column>
      <el-table-column label="小区号" prop="passworod"></el-table-column>
      <el-table-column label="小区名称" prop="Villagename"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="modifyData(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button type="danger" @click="deleteData(scope.$index, tableData)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model:visible="centerDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="物业账号" :picker-options="pickerOptions">
          <el-date-picker
            v-model="editForm.date"
            type="account"
            placeholder="选择物业账号"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="小区号">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model:visible="isAddMembers">
      <el-form :model="addForm">
        <el-form-item label="物业账号" :picker-options="pickerOptions">
          <el-date-picker
            v-model="addForm.date"
            type="account"
            placeholder="物业账号"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="小区号">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="小区名称">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitAddRow()">确定</el-button>
      </div>
    </el-dialog>
  </div>
<el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>

</template>


<script>
var _index;
export default {
  name: "HomeFrame",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      centerDialogVisible: false,
      isAddMembers: false,
      editForm: [],
      addForm: [],
      searchData: "",
      input: "",
      id: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [
        {
          account: "01",
          passworod: "01001",
          Villagename: "阳光都市",
        },
        {
          account: "02",
          passworod: "02002",
          Villagename: "遠洋天地",
        },
        {
          account: "03",
          passworod: "03003",
          Villagename: "金玉良苑",
        },
        {
          account: "04",
          passworod: "04004",
          Villagename: "名仁家园",
        },
      ],
    };
  },
  methods: {
    deleteData(index, row) {
      this.tableData.splice(index, 1);
      console.log("进行了删除操作");
      console.log("index的值:" + index);
      console.log("row的值是:", row);
    },
    modifyData(index, row) {
      this.centerDialogVisible = true;
      this.editForm = Object.assign({}, row); //重置对象
      _index = index;
      console.log("index的值:" + index);
      console.log("_index的值:" + _index);
      console.log("row的值是:", this.editForm); //代表选择的这一行的数据
    },
    sumbitEditRow() {
      var editData = _index;
      console.log("editData的值" + this.editForm);
      this.tableData[editData].name = this.editForm.name;
      this.tableData[editData].date = this.editForm.date;
      this.tableData[editData].address = this.editForm.address;
      this.centerDialogVisible = false;
      console.log("数据：" + this.editForm.date);
      console.log("对象数组", this.tableData);
    },
    closeDialog() {
      this.centerDialogVisible = false;
      this.isAddMembers = false;
      console.log("editfrom", this.editForm);
      console.log("addfrom", this.addForm);
    },
    addMembers() {
      this.isAddMembers = true;
      this.addForm = {
        passworod: "",
        date: "",
        address: "",
      };
    },
    sumbitAddRow() {
      this.tableData = this.tableData || [];
      console.log("表格是:" + this.tableData);
      this.tableData.push({
        name: this.addForm.name,
        account: this.addForm.date,
        address: this.addForm.address,
      });
      this.isAddMembers = false;
      console.log("新增的日期：" + this.addForm.date);
    },
  },
  computed: {
    tables() {
      const input = this.input;
      if (input) {
        console.log("input输入的搜索内容:" + this.input);
        return this.tableData.filter((data) => {
          console.log("object:" + Object.keys(data));
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(input) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 50 px;
  background: #ebeef5;
  padding: 10px;
}
</style>
